<template>
  <div id="app" :class="bgClass">
    <router-view />
  </div>
</template>

<script>
  import buildAsyncRoutes from 'venusui/menu/route/buildAsyncRoutes'// 引用组件中创建菜单的方法
  import Cookies from 'js-cookie' // 引用Cookies
  export default {
    name: 'App',
    data() {
      return {
        bgColorMap: { // 主题类别样式名称
          Skin1: '',
          Skin2: 'bg-green',
          Skin3: 'bg-blue',
          Skin4: 'bg-gold'
        },
        callbackBg: 'Skin1'
      }
    },
    computed: {
      bgClass() { // 获取背景样式
        return this.bgColorMap[this.callbackBg]
      }
    },
    mounted() {
      // 初始化请求.用户背景颜色.数据等
      this.getAppSkin()
      // 注册皮肤更换
      if (window.CCApp) {
        CCApp.RegisterSetSkinFunc(x => {
          const result = JSON.parse(x['retval'])
          this.callbackBg = result.SkinId
        })
      }
    },
    created() {
      buildAsyncRoutes()// 调用创建菜单的方法
    },
    methods: {
      // 获取初始皮肤
      getAppSkin() {
        this.callbackBg = Cookies.get('callBackBg') || this.callbackBg
      }
    }
  }
</script>
<style lang="scss">
#app {
  user-select: none;
}
.bg-green {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.08;
    background: linear-gradient(#9efff4, #05c1a9);
  }
}
.bg-blue {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.1;
    background: linear-gradient(#b9d9ff, #0263d7);
  }
}
.bg-gold {
  position: relative;
  &::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.11;
    background: linear-gradient(#f8f7f5, #ffcba8);
  }
}
</style>

